<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title"></gltitle>


    <div class="container">
      <ul style="margin-bottom: 0.66rem;">
        <li :class="item.code == currLan ? 'db on' : 'db'" v-for="item in list" :key="item.id"
          @click="setLang(item.code)">
          <!--          <img :src="item.icon" alt="">-->
          <div class="ico" v-if="item.code == currLan">
            <van-icon name="checked" color="#3df2b8" size="20px"/>
          </div>
          <div class="name flexs">{{ item.name }}</div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {

  data() {
    return {
      title: this.$t('title.doc33'),
      titleRight: this.$t('page.doc204'),
      list: [],
      currLan: "en_US",
    };
  },

  mounted() {
    this.currLan = localStorage.getItem("language") || "en_US";

    this.datainfo()
  },
  methods: {
    ...mapMutations([
      "SET_USERDATA",
      "SET_LANG"
    ]),
    ...mapActions(["Get_userData,resetVuex"]),

    datainfo() {
      this.$post(this.URL.user.lang, {
      }).then((res) => {
        if (res.code == 0) {
          this.list = res.data
        }
      });
    },

    onBtn() {
      localStorage.setItem("language", this.currLan);
      this.$i18n.locale = this.currLan;
      this.$Local(this.currLan)
      this.SET_LANG(this.currLan);
      this.$toast.success(this.$t('page1.doc73'));
      this.$router.go(-1);
    },
    setLang(lan) {
      this.currLan = lan;
      sessionStorage.removeItem("location_lng");
      sessionStorage.removeItem("location_lat");
      this.onBtn()
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}

/deep/ .container {
  padding: 0 0.3rem;
}

.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

ul {
  li {
    background: #0b3530;
    border-radius: 10px;
    margin-top: .2rem;
    height: 0.83rem;
    padding: 0 0rem;
    border: 1px solid rgba(53, 203, 138, .3);
    padding-left: .2rem;

    >img {
      height: .4rem;
    }

    .name {
      font-size: .32rem;
      font-weight: 500;
      color: var(--COcolor3);
      line-height: .62rem;
      margin-left: .1rem;
    }

    .ico {
      img {
        width: 18px;
      }
    }
  }
}
</style>
